<template>
  <div>
    <div>
      <el-input placeholder="请输入bom名称" v-model="dialog2.bomName" class="inputSuffix">
        <el-button slot="append" icon="el-icon-search" @click="searchBom"></el-button>
      </el-input>
    </div>
    <div class="block" ref="tree">
      <el-tree
        :data="dataList"
        node-key="id"
        :props="defaultProps"
        :expand-on-click-node="false"
        accordion
        ref="treeNode"
        :load="loadNode"
        lazy
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span
            @click="openTableDialog(data)"
            :class="data.hasSame === '1' ? 'tree-name-color-blue' : ''"
            style="font-size: 15px;font-weight: bold;"
          >{{ node.label }}</span>
          <span>{{data.hasSame === '1'?('+'+data.isUpdate):''}}</span>
        </span>
      </el-tree>
    </div>
    <el-dialog
      :title="dialog.title"
      width="80%"
      top="30px"
      class="apply-dialog"
      :visible.sync="dialog.isShow"
      :close-on-click-modal="false"
      v-dialogDrag
    >
      <div :style="tableDialogHeightTabPane">
        <el-button type="success" @click="isShowDialog('insert')" icon="el-icon-plus">新增</el-button>
        <el-table
          :data="dialog.dataList"
          :highlight-current-row="true"
          stripe
          border
          class="table-index"
          style="width: 100%;"
          :header-cell-style="getRowClass"
          v-loading="dialog.loading"
        >
          <el-table-column fixed type="index" label="*" sortable min-width="40" align="center"></el-table-column>
          <el-table-column
            prop="cgMaterial.name"
            label="物料名称"
            sortable
            show-overflow-tooltip
            min-width="120"
            align="center"
          ></el-table-column>
          <el-table-column sortable prop="cgMaterial.code" label="物料编码" min-width="80" align="center"></el-table-column>
          <el-table-column sortable prop="cgMaterial.type" label="物料型号" min-width="80" align="center"></el-table-column>
          <el-table-column sortable prop="cgMaterial.texture" label=" 材质" min-width="120" align="center"></el-table-column>
          <el-table-column sortable prop="drawCode" label="图纸编号" min-width="100" align="center"></el-table-column>
          <el-table-column
            prop="nums"
            label=" 使用量"
            show-overflow-tooltip
            min-width="80"
            align="center"
          ></el-table-column>
          <el-table-column prop="cgMaterial.no" sortable label="损耗系数" min-width="80" align="center"></el-table-column>
          <el-table-column prop="cgMaterial.managerLevel" sortable label="管理等级" min-width="100" align="center"></el-table-column>
          <el-table-column fixed="right" label="操作" align="center" width="100">
            <template slot-scope="scope">
              <el-button @click="isShowDialog('update',scope.row)" type="text" size="mini">编辑</el-button>
              <el-button @click="deleteMaterile(scope.row)" type="text" size="mini">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
    <el-dialog
      :title="dialog2.title"
      width="80%"
      top="30px"
      class="apply-dialog"
      :visible.sync="dialog2.isShow"
      :close-on-click-modal="false"
      v-dialogDrag
    >
      <div :style="tableDialogHeightTabPane">
        <el-table
          :data="dialog2.dataList"
          :highlight-current-row="true"
          stripe
          border
          class="table-index"
          style="width: 100%;"
          :header-cell-style="getRowClass"
          v-loading="dialog.loading"
        >
          <el-table-column fixed type="index" label="*" min-width="40" align="center"></el-table-column>
          <el-table-column
            prop="name"
            label="bom名称"
            show-overflow-tooltip
            min-width="120"
            align="center"
          ></el-table-column>
          <el-table-column prop="machineTypeName" label="机型" min-width="180" align="center"></el-table-column>
          <el-table-column prop="code" label="物料编码" min-width="80" align="center"></el-table-column>
          <el-table-column prop="type" label="物料型号" min-width="80" align="center"></el-table-column>
          <el-table-column prop="texture" label=" 材质" min-width="120" align="center"></el-table-column>
          <el-table-column prop="drawIdName" label="图纸名称" min-width="100" align="center"></el-table-column>
          <el-table-column
            prop="nums"
            label=" 使用量"
            show-overflow-tooltip
            min-width="80"
            align="center"
          ></el-table-column>
          <el-table-column prop="no" label="损耗系数" min-width="80" align="center"></el-table-column>
          <el-table-column prop="managerLevel" label="管理等级" min-width="100" align="center"></el-table-column>
          <el-table-column fixed="right" label="操作" align="center" width="100">
            <template slot-scope="scope">
              <el-button @click="isShowDialog('update',scope.row)" type="text" size="mini">编辑</el-button>
              <el-button @click="deleteMaterile(scope.row,'search')" type="text" size="mini">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
       <div slot="footer" class="dialog-footer" style="text-align: center;">
      </div>
    </el-dialog>
    <el-dialog
      :title="dialog1.title"
      width="600"
      class="apply-dialog"
      :visible.sync="dialog1.isShow"
      :close-on-click-modal="false"
      v-dialogDrag
    >
      <el-form :inline="true" class="demo-form-inline" label-position="right" label-width="150px" :model="dialog1.formData">
        <el-form-item label="物料名称">
          <!-- <el-input v-model="dialog1.formData.name"></el-input> -->
          <el-autocomplete  class="autocomplete-row" v-model="dialog1.formData.name" :fetch-suggestions="querySearchAsync" placeholder="请输入物料名称" @select="handleSelect">
               <template slot-scope="{ item }">
                    <div class="name" :title="item.value">{{ item.value }}</div>
                    <div class="addr" :title="item.type">{{ item.type }}</div>
                </template>
          </el-autocomplete>
        </el-form-item>
        <el-form-item label="物料编码">
          <el-input v-model="dialog1.formData.code" disabled></el-input>
        </el-form-item>
        <el-form-item label="物料型号">
          <el-input v-model="dialog1.formData.type" disabled></el-input>
        </el-form-item>
        <el-form-item label="材质">
          <el-input v-model="dialog1.formData.texture" disabled></el-input>
        </el-form-item>
        <el-form-item label="图纸编号">
          <el-input v-model="dialog1.formData.drawCode" disabled></el-input>
        </el-form-item>
        <el-form-item label="损耗系数">
          <el-input v-model="dialog1.formData.no" disabled></el-input>
        </el-form-item>
        <el-form-item label=" 管理等级">
          <el-select v-model="dialog1.formData.managerLevel" class="inputSuffix" disabled>
            <el-option label="1" value="1"></el-option>
            <el-option label="2" value="2"></el-option>
            <el-option label="3" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="使用量">
          <el-input v-model="dialog1.formData.nums"></el-input>
        </el-form-item>
        <el-form-item label="创建人" v-if="dialog1.title.indexOf('修改')>-1">
          <el-input v-model="dialog1.formData.creatorName" disabled></el-input>
        </el-form-item>
        <el-form-item label="创建时间" v-if="dialog1.title.indexOf('修改')>-1">
          <el-input v-model="dialog1.formData.createTime" disabled></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center;">
        <el-button @click="submitList" type="primary">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import cgbHttp from "@/axios/cgbHttp.js";
export default {
  data() {
    return {
      tableDialogHeightTabPane: {
        /**dialog style */
        height: document.documentElement.clientHeight - 300 + "px",
        overflowY: "auto"
      },
    allMaterial:[],
      dataList: [],
      defaultProps: {
        children: "children",
        label: "drawingName",
        id: "id"
      },
      dialog: {
        title: "",
        isShow: false,
        dataList: [],
        loading: false
      },
      dialog1: {
        title: "",
        isShow: false,
        drawObj: {},
        formData: {}
      },
      dialog2: {
        title: "",
        bomName: "",
        isShow: false,
        dataList: []
      }
    };
  },
  methods: {
    loadNode(node, resolve) {
      let self = this;
      if (node.level === 0) {
        cgbHttp.baseBomGetDraw(0).then(res => {
            let result =[]
            res.content.forEach(item=>{
               if(item.id===1590){
                result.push(item)
               }
            })
          resolve(result);
        });
      } else {
        cgbHttp.baseBomGetDraw(node.data.id).then(res => {
           resolve(res.content);
        });
      }
    },
    openTableDialog(data) {
      let self = this;
      self.dialog.title = `${data.drawingName}bom列表`;
      self.dialog.isShow = true;
      self.dialog1.drawObj.drawId = data.id;
      self.dialog1.drawObj.drawCode = data.drawingCode;
      self.dialog1.drawObj.machineType = data.drawingType;
      self.dialog1.drawObj.drawingName = data.drawingName;
      self.baseBomGetBomList();
    },
    baseBomGetBomList() {
      let self = this;
      cgbHttp.baseBomGetBom(self.dialog1.drawObj.drawId).then(res => {
        self.dialog.dataList = res.content;
      });
    },
    isShowDialog(type, row) {
      let self = this;
      self.dialog1.isShow = true;
      self.dialog1.title = `${self.dialog1.drawObj.drawingName}${type === "insert" ? "新增" : "修改"}bom`;
      if (type !== "insert") {
        self.dialog1.formData = {
            mid:row.mid,
            code: row.code,
            createTime: row.createTime,
            creator: row.creator,
            creatorName: row.creatorName,
            drawCode: row.drawCode,
            drawId: row.drawId,
            enable: row.enable,
            id: row.id,
            machineType: row.machineType,
            managerLevel: row.managerLevel,
            materialleadTime: row.materialleadTime,
            name: row.name,
            no: row.no,
            nums: row.nums,
            texture: row.texture,
            type: row.type
        };
      } else {
        self.dialog1.formData = {
          drawId: self.dialog1.drawObj.drawId,
          drawCode: self.dialog1.drawObj.drawCode,
          machineType: self.dialog1.drawObj.machineType
        };
      }
    },
    submitList() {
      let self = this;
      let type = self.dialog1.title.indexOf("新增") > -1 ? "insert" : "update";
      let data={
          drawId:self.dialog1.drawObj.drawId,
          id:self.dialog1.formData.id,
          mid:self.dialog1.formData.mid,
          nums:self.dialog1.formData.nums
      }
      cgbHttp.baseBomAddUpdateBom(type, self.dialog1.formData).then(
        res => {
          self.$message.success(`${self.dialog1.title}成功`);
          self.dialog1.isShow = false;
          if (self.dialog2.isShow) {
            self.searchBomList();
          } else {
            self.baseBomGetBomList();
          }
        },
        error => {
          self.$message.error(`${self.dialog1.title}失败`);
        }
      );
    },
    searchBom() {
      let self = this;
      self.dialog2.title = "bom列表";
      self.dialog2.isShow = true;
      self.searchBomList();
    },
    searchBomList() {
      let self = this;
      let data = {
        bomName: self.dialog2.bomName
      };
      self.dialog2.loading = true;
      cgbHttp.getBomList(data).then(res => {
          self.dialog2.dataList = res.content.cgBoms
      });
    },
    querySearchAsync(queryString, callback){
        let result=[];
            cgbHttp.searchMaterialKeyWord({name:queryString}).then(res=>{
                if(res.content&&res.content.length>0){
                    res.content.forEach(element => {
                        element.value = element.name;
                    });
                }
                result = res.content;
                callback(result);
            })
        },
    handleSelect(item){
        let self = this;
        self.dialog1.formData.mid = item.id;
        self.dialog1.formData.code = item.code?item.code:'';
        self.dialog1.formData.type = item.type?item.type:'';
        self.dialog1.formData.texture = item.texture ? item.texture:'';
        self.dialog1.formData.managerLevel = item.managerLevel ? item.managerLevel:'';
        self.dialog1.formData.no = item.no?item.no:'';
    },
    deleteMaterile(row,type){
        let self = this;
            self.$confirm('是否删除物料?', '提示', {
            confirmButtonClass: 'el-button--warning'
            }).then(() => {
                cgbHttp.deleteBaseBom(row.id).then(res=>{
                    self.$message.success(`物料删除成功`);
                    if(type==='search'){
                        self.searchBomList();
                    }else{
                        self.baseBomGetBomList();
                    }

                },error=>{
                    self.$message.error(`物料删除成功`);
                })
            }).catch(() => {})
    }
  }
};
</script>
<style scoped>
.tree-name-color-blue {
  color: #409eff;
}
.name{
    line-height: 1.6;
    padding-top:5px;
}
.addr{
    font-size: 12px;
    color:#b4b4b4;
    line-height: 1;
    padding-bottom:5px;
}
</style>

